<script setup lang="ts">
import TheWelcome from '../components/TheWelcome.vue'

import { useLocalStorage, usePreferredDark } from '@vueuse/core'
import { ref } from 'vue';

import {useMouse} from '@vueuse/core' 
import { reactive, computed } from 'vue'

import { useEventListener } from '@vueuse/core';
import { effectScope } from 'vue'
import { onClickOutside } from '@vueuse/core';
import { watch } from 'vue';
import { UseMouse } from '@vueuse/components';

// import Antd from 'ant-design-vue';
import { createApp } from 'vue';
import { Button, message } from 'ant-design-vue';
import { theme } from 'ant-design-vue';
import { AreaChartOutlined, GithubOutlined, CompassOutlined} from '@ant-design/icons-vue';
// import App from '../App.vue';
// import { Button } from 'ant-design-vue'

// 监听 值能包裹复杂对象
const store = useLocalStorage(
  'my-storage',
  {
    name: '1111',
    color: '11',
  },
)

const user_1 = ref(0);
const user_2 = ref({name: "jw", age: 23 })

user_2.value.name = "jw_updated";

const mouse = reactive(useMouse())

// const stop = useEventListener('mousemove', () => {})

const scope = effectScope()

// ?????
// scope.run(() => {
//   // ...

//   useEventListener('mousemove', () => {})
//   onClickOutside(store.value.color, () => {})
//   watch(user_1, () => {})
// })

const data = reactive({
  first_name: 'ren',
  last_name: 'jw'
})

const fullname = computed(() => {
  return `${data.first_name} ${data.last_name}`;
}
);

// stop();
// scope.stop();


// const app = createApp(App);

// /* 会自动注册 Button 下的子组件, 例如 Button.Group */
// app.use(Button).mount('#app');

// app.config.globalProperties.$message = message;


import type { CSSProperties } from 'vue';
const value = ref('horizontal');
const baseStyle: CSSProperties = {
  width: '25%',
  height: '54px',
};


// import type { CSSProperties } from 'vue';
// 用于Layout；为什么在script里面写样式呢？
import { headerStyle, contentStyle, siderStyle, footerStyle } from '../assets/styles';

</script>

<template>
  <main>
    <!-- <TheWelcome /> -->
    <div>变量store</div>
    <div>
      <label>name:</label>
      <input v-model="store.name">
      <label>color:</label>
      <input v-model="store.color">
    </div>
    <div>{{store.name}}</div>
    <div>{{store.color}}</div>
    <div>{{user_1}}</div>
    <div>{{user_2.name}}</div>
    <div>mouse.x: {{mouse.x}}</div>
    <div>{{fullname}}</div>
    
    <UseMouse v-slot="{ x, y }">
      x: {{ x }}
      y: {{ y }}
    </UseMouse>

    <div>
      <button>这不是个按钮吗？</button>

      <a-config-provider
      :theme="{
        token: {
          colorPrimary: '#00b96b',
        },
      }">button_test_1
      <a-button />
      </a-config-provider>
    </div>
    

    
      <a-space wrap>
        <a-button type="primary">Primary Button</a-button>
        <a-button>Default Button</a-button>
        <a-button type="dashed">Dashed Button</a-button>
        <a-button type="text">Text Button</a-button>
        <a-button type="link">Link Button</a-button>
      </a-space>
    
      <AreaChartOutlined />
      <GithubOutlined />
      <CompassOutlined />

      <a-space direction="horizontal">
        <a-typography-text>Ant Design Vue (default)</a-typography-text>
        <a-typography-text type="secondary">Ant Design Vue (secondary)</a-typography-text>
        <a-typography-text type="success">Ant Design Vue (success)</a-typography-text>
        <a-typography-text type="warning">Ant Design Vue (warning)</a-typography-text>
        <a-typography-text type="danger">Ant Design Vue (danger)</a-typography-text>
        <a-typography-text disabled>Ant Design Vue (disabled)</a-typography-text>
        <a-typography-text mark>Ant Design Vue (mark)</a-typography-text>
        <a-typography-text code>Ant Design Vue (code)</a-typography-text>
        <a-typography-text keyboard>Ant Design Vue (keyboard)</a-typography-text>
        <a-typography-text underline>Ant Design Vue (underline)</a-typography-text>
        <a-typography-text delete>Ant Design Vue (delete)</a-typography-text>
        <a-typography-text strong>Ant Design Vue (strong)</a-typography-text>
        <a-typography-link href="https://antdv.com" target="_blank">
          Ant Design Vue (Link)
        </a-typography-link>
      </a-space>

      <a-typography-title>h1. Ant Design Vue</a-typography-title>
      <a-typography-title :level="2">h2. Ant Design Vue</a-typography-title>


      <!-- 布局 -->

      <!-- 弹性盒子 -->
      <a-flex gap="middle" vertical>
        <a-radio-group v-model:value="value">
          <a-radio value="horizontal">horizontal</a-radio>
          <a-radio value="vertical">vertical</a-radio>
        </a-radio-group>
        <a-flex :vertical="value === 'vertical'">
          <div
            v-for="(item, index) in new Array(4)"
            :key="item"
            :style="{ ...baseStyle, background: `${index % 2 ? '#1677ff' : '#1677ffbf'}` }"
          />
        </a-flex>
      </a-flex>

      <!-- 栅格24列布局 -->
      <a-row>
        <a-col :span="24">col</a-col>
      </a-row>
      <a-row>
        <a-col :span="12">col-12</a-col>
        <a-col :span="12">col-12</a-col>
      </a-row>
      <a-row>
        <a-col :span="8">col-8</a-col>
        <a-col :span="8">col-8</a-col>
        <a-col :span="8">col-8</a-col>
      </a-row>

      <!-- 响应尺寸 -->
      <a-row>
        <a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">Col</a-col>
        <a-col :xs="20" :sm="16" :md="12" :lg="8" :xl="4">Col</a-col>
        <a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">Col</a-col>
      </a-row>

      <!-- Layout -->
      <div :style="headerStyle">Header</div>  
      <div :style="contentStyle">Content</div> 
      <div :style="siderStyle">Sider</div>
      <div :style="footerStyle">footer</div>
      <!-- 两种似乎都能使用 -->
      <a-space direction="vertical" :style="{ width: '100%' }" :size="[0, 48]">
        <a-layout>
          <a-layout-header :style="headerStyle">Header</a-layout-header>
          <a-layout-content :style="contentStyle">Content</a-layout-content>
          <a-layout-footer :style="footerStyle">Footer</a-layout-footer>
        </a-layout>
      </a-space>

      



  </main>
</template>
